<template>
<div>
  <!-- 地图主体框架-->
  <div class="map"  id="container" ref="amap">
    <!--内嵌位置信息-->
    <div class="position">
      <el-table
          :data="tableData"
          style="width: 100%;height: 185px"
          :header-cell-style="{background:'#09293e' }"
      >
        <el-table-column
            prop="date"
            label="纬度">
        </el-table-column>
        <el-table-column
            prop="name"
            label="高度">
        </el-table-column>
        <el-table-column
            prop="address"
            label="距离">
        </el-table-column>
        <el-table-column
            prop="time"
            label="时间">
        </el-table-column>
      </el-table>
    </div>
    <!--内嵌数据信息-->
    <div class="select">
      <el-button-group>
        <el-button autofocus>实时数据</el-button>
        <el-button>历史数据</el-button>
      </el-button-group>
      <div class="select-row">
        <el-radio  label="1">线流动效果</el-radio>
        <el-radio  label="2">热力图</el-radio>
        <el-radio  label="3">全天热力图</el-radio>
        <el-radio  label="4">自动显示气泡</el-radio>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import * as AMapLoader from "@amap/amap-jsapi-loader";
  export default {
    data() {
      return {
        tableData:[]
      }
    },
    mounted() {
      this.initAMap()
    },
    methods: {
      initAMap() {
        const _this = this
        AMapLoader.load({
          key: '676e016bd38c5810deca9c615d4807f0', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
        })
            .then((AMap) => {
              const map = new AMap.Map('container', {
                // 设置地图容器id
                viewMode: '3D', // 默认2d地图模式
                zoom: 12, // 初始化地图级别
                zooms: [5, 30], // 地图缩放范围
                // 可以设置初始化当前位置
                center: [116.397428, 39.90923] // 初始化地图位置
              })
              // 添加控件
              AMap.plugin(
                  [
                    'AMap.ElasticMarker',
                    'AMap.Scale',
                    'AMap.ToolBar',
                    'AMap.HawkEye',
                    'AMap.MapType',
                    'AMap.Geolocation',
                  ],
                  () => {
                    map.addControl(new AMap.ElasticMarker()) // map.addControl为地图添加对应的控件
                    map.addControl(new AMap.Scale())
                    map.addControl(new AMap.ToolBar())
                    map.addControl(new AMap.HawkEye())
                    map.addControl(new AMap.MapType())
                    map.addControl(new AMap.Geolocation())
                  }
              )
              _this.map = map
            })
            .catch((e) => {
              console.log(e)
            })
      },
    }

  }
</script>
<style scoped lang="less">
.map {
  width: 100%;
  height: 800px;
}
.position {
  position: absolute;
  //background-color: #3adae6;
  z-index: 10;
  width: 40%;
  height: 200px;
  margin-top: 595px;
  margin-left: 5px;
  /deep/  .el-table, .el-table__expanded-cell {
    background-color:#09293e ;
  }
}
.select {
  position: absolute;
  background-color: rgba(9, 41, 62 , 0.2);
  z-index: 10;
  // 设置透明度(opacity不好使，因为子元素也会跟着一起变)
  width: 30%;
  height: 80px;
  margin-top: 715px;
  //margin-top: 300px;
  margin-left: 54%;
  .el-button-group {
    margin-top: 5px;
    // 子按钮样式
    .el-button {
      background: #ffffff !important;
      color: #09293e !important;
      border-color: #FFFFFF !important;
    }
    // 悬浮时子按钮样式
    .el-button:hover {
      background: #3599F5 !important;
      border-color: #3599F5 !important;
      color: #FFF !important;
      opacity: 0.8;
    }
    // 选中时的子按钮样式
    .el-button:focus {
      background: #09293e !important;
      border-color: #ffffff !important;
      color: #fff !important;
    }
  }
  // 下面的
  .select-row {
    margin-top: 5px;
    .el-radio /deep/ .el-radio__label {
      font-size: 10px;
    }
    .el-radio /deep/ .el-radio__inner {
      width: 10px;
      height: 10px;
    }

  }
}
</style>